<template>
  <div class="about-container">
    <h1>Element Plus 按需导入示例</h1>
    
    <!-- 按钮组件示例 -->
    <div class="demo-block">
      <h2>按钮组件</h2>
      <el-button type="primary" @click="handlePrimaryClick">主要按钮</el-button>
      <el-button type="success" @click="handleSuccessClick">成功按钮</el-button>
      <el-button type="warning" @click="handleWarningClick">警告按钮</el-button>
      <el-button type="danger" @click="handleDangerClick">危险按钮</el-button>
      <el-button type="info" @click="handleInfoClick">信息按钮</el-button>
    </div>

    <!-- 表单组件示例 -->
    <div class="demo-block">
      <h2>表单组件</h2>
      <el-form :model="form" label-width="120px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="form.date2"
              placeholder="选择时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type" />
            <el-checkbox label="地推活动" name="type" />
            <el-checkbox label="线下主题活动" name="type" />
            <el-checkbox label="单纯品牌曝光" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助" />
            <el-radio label="线下场地免费" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格组件示例 -->
    <div class="demo-block">
      <h2>表格组件</h2>
      <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="date" label="日期" sortable width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
      </el-table>
    </div>

    <!-- 对话框组件示例 -->
    <div class="demo-block">
      <h2>对话框组件</h2>
      <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
      <el-dialog v-model="dialogVisible" title="提示" width="30%">
        <span>这是一段信息</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 表单数据
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

// 表格数据
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄',
  },
  {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄',
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄',
  },
])

// 对话框显示状态
const dialogVisible = ref(false)

// 按钮点击事件
const handlePrimaryClick = () => {
  ElMessage('主要按钮被点击')
}

const handleSuccessClick = () => {
  ElMessage({ message: '成功按钮被点击', type: 'success' })
}

const handleWarningClick = () => {
  ElMessage({ message: '警告按钮被点击', type: 'warning' })
}

const handleDangerClick = () => {
  ElMessage({ message: '危险按钮被点击', type: 'error' })
}

const handleInfoClick = () => {
  ElMessage({ message: '信息按钮被点击', type: 'info' })
}

// 表单提交事件
const onSubmit = () => {
  ElMessage({
    message: '提交成功！',
    type: 'success',
  })
  console.log('submit!', form)
}
</script>

<style scoped lang="scss">
.about-container {
  padding: 20px;
}

.demo-block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.demo-block h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.text-center {
  text-align: center;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>